<template>
  <el-tabs @tab-click="handleClick" type="card" style="height: 100%">
    <el-tab-pane label="已完成" style="height: 95%">
      <div class="main">
        <div class="header">
          <span style="margin-left: 20px">起止日期</span>
          <el-date-picker style="margin-left: 20px;width: 160px;" v-model="doneReq.startDate" type="date"
            placeholder="选择起始日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>—
          <el-date-picker v-model="doneReq.endDate" style="width: 160px;" type="date" placeholder="选择截止日期"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          <el-button type="text" style="margin-left: 20px" size="small" @click="contributionStat()">
            搜索
          </el-button>
          <el-button type="text" style="margin-left: 20px" size="small" @click="outputDoneExcel()">
            导出报表
          </el-button>
        </div>
        <el-table style="overflow: auto" height="90%" :data="doneDatas" stripe border highlight-current-row>
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column label="员工" width="160">
            <template slot-scope="scope">
              {{ scope.row.empName }}
            </template>
          </el-table-column>
          <el-table-column label="时期">
            <template slot-scope="scope">
              {{ scope.row.startDate | formatDate }} 至
              {{ scope.row.endDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="总完成量">
            <template slot-scope="scope">{{ scope.row.cons.length }}件</template>
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table style="overflow: auto;margin: 5px;" :data="scope.row.projectCons" stripe border
                highlight-current-row>
                <el-table-column label="工作性质">
                  <template slot-scope="info">
                    {{ info.row.projectType }}
                  </template>
                </el-table-column>
                <el-table-column label="工作内容">
                  <template slot-scope="info">
                    {{ info.row.projectName }}
                  </template>
                </el-table-column>
                <el-table-column label="单项完成量">
                  <template slot-scope="info">
                    {{ info.row.cons.length }}件
                  </template>
                </el-table-column>
                <el-table-column label="权重">
                  <template slot-scope="info">
                    {{ info.row.weight }}
                  </template>
                </el-table-column>
                <el-table-column label="平均时耗[天:时:分:秒]">
                  <template slot-scope="info">
                    {{ info.row.avgTimeDesc }}
                  </template>
                </el-table-column>
                <el-table-column type="expand">
                  <template slot-scope="info">
                    <el-table style="overflow: auto;margin:5px" :data="info.row.cons" stripe border
                      highlight-current-row>
                       <el-table-column label="日期">
                        <template slot-scope="con">
                          {{ con.row.CC_DoneTime | formatDate }}
                        </template>
                      </el-table-column>
                      <el-table-column label="流入时间">
                        <template slot-scope="con">
                          {{ con.row.CC_CreateTime | formatTime }}
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间">
                        <template slot-scope="con">
                          {{ con.row.CC_DoneTime | formatTime }}
                        </template>
                      </el-table-column>
                      <el-table-column label="时耗[天:时:分:秒]">
                        <template slot-scope="con">
                          {{ con.row.useTimeDesc }}
                        </template>
                      </el-table-column>
                      <el-table-column label="来源">
                        <template slot-scope="con">
                          <a @click="toForm(con.row.CC_FormID)" v-if="con.row.FLOW_Name">
                            【{{ con.row.BF_Name }}】
                            {{ con.row.FLOW_Name }}
                          </a>
                          <div v-else>人工录入</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="未完成" style="height: 95%">
      <div class="header">
        <span style="margin-left: 20px">关键字</span>
        <el-input placeholder="请输入关键字进行搜索" v-model="undoneReq.keyword"
          style="width: 200px; margin-left: 10px"></el-input>
        <span style="margin-left: 20px">发起日期</span>
        <el-date-picker style="margin-left: 20px;width: 160px;" v-model="undoneReq.startDate" type="date"
          placeholder="选择起始日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>—
        <el-date-picker v-model="undoneReq.endDate" style="width: 160px;" type="date" placeholder="选择截止日期"
          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        <el-button type="text" style="margin-left: 20px" size="small" @click="undoneContributionStat()">
          搜索
        </el-button>
        <el-button type="text" style="margin-left: 20px" size="small" @click="outputUndoneExcel()">
          导出报表
        </el-button>
      </div>
      <el-table style="overflow: auto" height="90%" :data="undoneDatas" stripe border highlight-current-row>
        <el-table-column label="业务类型" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.FLOW_Name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="表单">
          <template slot-scope="scope">
            <span>{{ scope.row.WFM_FormDataName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前节点" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.FRS_Name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发起人" width="100px">
          <template slot-scope="scope">
            {{ scope.row.USR_Name }}
          </template>
        </el-table-column>
        <el-table-column label="发起日期" width="120px">
          <template slot-scope="scope">
            {{ scope.row.WFM_CreateTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="节点负责人" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.FOC_Name }}</span>
            <span v-if="scope.row.FLS_ChoiceDesc">：{{ scope.row.FLS_ChoiceDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="来源" width="120px">
          <template slot-scope="scope">
            <el-button type="text" @click="toForm(scope.row.WFM_ID)">跳转</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { contributionStat, undoneContributionStat } from '@/api/common/contributionStat'
import { baseURL, empIdName, tokenName } from '@/config'
import axios from 'axios'
export default {
  data: function () {
    return {
      doneDatas: [],
      undoneDatas: [],
      doneReq: {
        startDate: null,
        endDate: null
      },
      undoneReq: {
        keyword: null,
        startDate: null,
        endDate: null
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    contributionStat() {
      contributionStat(this.doneReq).then(({ data }) => {
        this.doneDatas = data
      })
    },
    undoneContributionStat() {
      undoneContributionStat(this.undoneReq).then(({ data }) => {
        this.undoneDatas = data
      })
    },
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },

    outputDoneExcel() {
      if (!this.doneReq.startDate || !this.doneReq.endDate) {
        this.$message('请选择起止日期')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Common/ContributionStat/OutputDoneExcel', this.doneReq, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '已完成工作报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },

    outputUndoneExcel() {
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Common/ContributionStat/OutputUndoneExcel', this.undoneReq, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '未完成工作报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    this.contributionStat()
    this.undoneContributionStat()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}

.el-tabs__content {
  height: 100%;
  overflow: auto;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 100%;
}
</style>
